<template>
    <el-form-item class="block-item" style="width: 100%;">
        <el-card class="form-card" style="width: 100%;">
            <template #header>
                <div class="card-header">
                    <span>库表信息</span>
                    <el-button type="primary" size="small" :disabled="!hasDesc"
                        @click="handleAIGenerateTable">AI生成</el-button>
                </div>
            </template>
            <el-table :data="props.form.tableInfos" border>
                <el-table-column label="库名" width="120">
                    <template #default="scope">
                        <el-select v-model="scope.row.source" placeholder="请选择" :loading="loadingDb"
                            @change="() => handleDbChange(scope.row)">
                            <el-option v-for="item in props.dbList" :key="item" :label="item" :value="item" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="表名" width="240">
                    <template #default="scope">
                        <el-select v-model="scope.row.table" placeholder="请选择" :loading="props.loadingTable"
                            :disabled="!scope.row.source">
                            <el-option v-for="item in props.tableList" :key="item" :label="item" :value="item" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="关联说明">
                    <template #default="scope">
                        <el-input v-model="scope.row.description" placeholder="文本"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="关联程度" width="100">
                    <template #default="scope">
                        <el-select v-model="scope.row.priority">
                            <el-option label="高" value="high"></el-option>
                            <el-option label="中" value="medium"></el-option>
                            <el-option label="低" value="low"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160">
                    <template #default="scope">
                        <el-button link type="primary" @click="handleViewTable(scope.$index)">查看</el-button>
                        <el-button link type="primary" @click="handleDeleteTable(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="footer-actions">
                <el-button type="primary" plain @click="handleAddTable">手动添加库表信息</el-button>
            </div>
        </el-card>
    </el-form-item>
</template>

<script setup>

const props = defineProps({
    form: {
        type: Object,
        required: true,
        default: () => ({
            tableInfos: []
        }),
        validator: (value) => {
            return value && Array.isArray(value.tableInfos)
        }
    },
    hasDesc: {
        type: Boolean,
        required: true,
        default: false
    },
    dbList: {
        type: Array,
        required: true,
        default: () => []
    },
    tableList: {
        type: Array,
        required: true,
        default: () => []
    },
    loadingDb: {
        type: Boolean,
        required: true,
        default: false
    },
    loadingTable: {
        type: Boolean,
        required: true,
        default: false
    }
})

const emit = defineEmits(['view-table', 'delete-table', 'add-table', 'ai-generate', 'table-list'])

const handleDbChange = async (row) => {
    emit('table-list', row.source)
}

const handleViewTable = async (index) => {
    emit('view-table', index)
}

const handleDeleteTable = (index) => {
    emit('delete-table', index)
}

const handleAddTable = () => {
    emit('add-table')
}

const handleAIGenerateTable = () => {
    emit('ai-generate')
}
</script>

<style scoped>
.footer-actions {
    margin-top: 16px;
    text-align: center;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>